<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pinia 模块化开发</title>
</head>
<body>
<div id="app">
    <user></user>
    <shop></shop>
</div>

<template id="user">
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <div>性别：{{ gender }}</div>
    <button v-on:click="changeAge">修改年龄</button>
    <button v-on:click="changeGender">修改性别</button>
</template>

<template id="shop">
    <div v-for="(item, key) in items">
        <div>商品编号：{{ item.id }}</div>
        <div>商品名称：{{ item.name }}</div>
        <div>商品价格：{{ item.price }}</div>
    </div>
</template>

<script type="module">
    import {createApp, ref, reactive} from "../../../../js/vue.esm-browser.js";
    import {defineComponent} from "../../../../js/vue.esm-browser.js";
    import {createPinia, defineStore, storeToRefs} from "../../../../js/pinia.esm-browser.js";

    let useShopStore = defineStore(
        "shop",
        {
            state: () => {
                return {
                    items: [
                        {
                            id: 1,
                            name: "Redmi 13 Pro",
                            price: 1999,
                        },
                        {
                            id: 2,
                            name: "GT 5 Pro",
                            price: 2799,
                        },
                    ]
                }
            },
            getters: {},
            actions: {},
        }
    );

    let useUserStore = defineStore(
        "user",
        {
            state: () => {
                return {
                    name: "abcque",
                    age: 18,
                    gender: "M",
                }
            },
            getters: {},
            actions: {
                changeAge() {
                    this.age++
                },
                changeGender() {
                    if (this.gender === "M") {
                        this.gender = "W"
                    } else {
                        this.gender = "M"
                    }
                }
            },
        }
    );

    let user = defineComponent(
        {
            template: "#user",
            setup() {
                let userStore = useUserStore();
                let {name, age, gender} = storeToRefs(userStore);

                function changeAge() {
                    userStore.changeAge()
                }

                function changeGender() {
                    userStore.changeGender()
                }

                return {
                    name, age, gender, changeAge, changeGender,
                };
            }
        }
    );

    let shop = defineComponent(
        {
            template: "#shop",
            setup(){
                let shopStore = useShopStore();
                let {items} = storeToRefs(shopStore);


                return {
                    items,
                }
            }
        }
    );


    let app = createApp(
        {
            setup() {
                return {}
            },
            components: {
                user,shop
            }
        }
    )

    let pinia = createPinia()
    app.use(pinia)
    app.mount("#app")
</script>
</body>
</html>